<template>
  <div>
    <el-card>
      <div slot="header">
        <el-page-header content="商家信息管理">
          
        </el-page-header>
      </div>
      <div>
        <el-table :data="final_db_shop" style="width: 100%" @cell-mouse-enter="enterCell">
          <el-table-column
            header-align="center"
            align="center"
            prop="id"
            label="编号"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="名称"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="type"
            label="类型"
            :filters="[{text:'开发商',value:'开发商'},{text:'代销机构',value:'代销机构'},{text:'包销机构',value:'包销机构'}]"
            :filter-method="filterHandler"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="account"
            label="账号"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="状态"
            prop="state"
            :filters="[{text:'申请',value:'申请'},{text:'已注册',value:'已注册'}]"
            :filter-method="filterHandler"
          >
          <template slot-scope="scope">
            <el-tag :type="getTagType(scope.row.state)">{{scope.row.state}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column label="材料"   header-align="center"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="licence_show=true">执照</el-button>
            </template>
          </el-table-column>
          <el-table-column label="" header-align="left" align="center"  width="300px">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" placeholder="输入关键字搜索">
              </el-input>
            </template>
            <template slot-scope="scope">
              <template v-if="scope.row.state == '申请'">
                <div>
                  <el-button type="primary" size="small" @click="allow(scope.row)">同意</el-button>
                  <el-button type="info" size="small" @click="reject(scope.row)">拒绝</el-button>
                </div>
              </template>
              <template v-else>
                <div v-if="scope.row.state == '已注册'">
                  <el-button type="primary" size="small" @click="delItem(scope.row.id)">不再合作</el-button>
                </div>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      :append-to-body="true"
      title="营业执照"
      :visible.sync="licence_show"
      width="width">
      <div>
        <el-image
          style="width: 100%"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.whnews.cn%2Fdszx%2Fuploads%2Fcustomer%2Flicense%2F58983%2Fthumb_l_QQ__20171228085714.jpg&refer=http%3A%2F%2Fwww.whnews.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635147766&t=20adf1a176cef0110909113777485a55"
          :fit="fit"></el-image>
      </div>
   
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  mounted(){
    this.init_db_shop()
  },
  computed:{
    ...mapState(['db_shop']),
    final_db_shop(){
      return this.db_shop.filter(item=>this.search==''||this.search==item.name)
    }
  },
  methods:{
    init_db_shop(){
      //以登录请求回来的managerId为参数请求
      //返回 数据 存入vuex => computed 动态响应式
      let res = [ {
          id: "0001",
          name: "天晨小区",
          type: "开发商",
          account: "1232423423",
          password: "1234556",
          licence: ["url1", "url2"],
          state: "申请",
        },
        {
          id: "0002",
          name: "天晨小区",
          type: "开发商",
          account: "1232423423",
          password: "1234556",
          licence: ["url1", "url2"],
          state: "已注册",
        },
         {
          id: "0003",
          name: "天晨小区",
          type: "开发商",
          account: "1232423423",
          password: "1234556",
          licence: ["url1", "url2"],
          state: "已拒绝",
        },]

      this.$store.commit('init_db_shop',res)
    },
    delItem(id){
      this.$alert('请问确定要永久删除吗','警告',{
        confirmButtonText: '确定',
          callback: action => {
            for(let i in this.tableData){
              if(this.tableData[i].id===id){
                this.tableData.splice(i,1)
                break
              }
            }
            this.$message({
              type: 'info',
              message: `删除成功`
            });
          }
      })
    },
    enterCell(row, column, cell, event){
      this.currentItem = row
    },
    allow(row){
       //发出axios请求 ==> 通过
      this.$message.success('已通过')
       row.state = '已注册'
    },
    reject(row){
       //发出axios请求 ==> 拒绝
       this.$message.error('已拒接')
       row.state = '已拒绝'
    },
    filterHandler(value, row, column) {
       console.log(value,column)
        const property = column['property'];
        return row[property] === value;
    },
    getTagType(state){
      switch(state){
        case "申请":return "";
        case "已注册":return "success";
        case '已拒绝':return 'info'
      }
    }
  },
  data() {
    return {
      licence_show:false,
      currentItem:{},
      search: "",
      tableData: [
        {
          id: "0001",
          name: "天晨小区",
          type: "开发商",
          account: "1232423423",
          password: "1234556",
          licence: ["url1", "url2"],
          state: "申请",
        },
        {
          id: "0002",
          name: "天晨小区",
          type: "开发商",
          account: "1232423423",
          password: "1234556",
          licence: ["url1", "url2"],
          state: "已注册",
        },
         {
          id: "0003",
          name: "天晨小区",
          type: "开发商",
          account: "1232423423",
          password: "1234556",
          licence: ["url1", "url2"],
          state: "已拒绝",
        },
      ],
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}
</style>